<template>
  <el-container>
    <el-header>
      <div class="header">
        <img src="../assets/u27.png" alt />
        <h2>老师管理</h2>
      </div>
      <div class="header-r">
        <i class="el-icon-mobile-phone">下载中心</i>
        <i class="el-icon-user">{{this.$store.state.loginName}}</i>
      </div>
    </el-header>
    <el-main class="content-header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="校区">
          <el-select v-model="formInline.user" placeholder="请选择校区">
            <el-option label="宝安校区" value="选项1"></el-option>
            <el-option label="南山校区" value="选项2"></el-option>
            <el-option label="福田校区" value="选项3"></el-option>
            <el-option label="罗湖校区" value="选项4"></el-option>
            <el-option label="盐田校区" value="选项5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科目">
          <el-select v-model="formInline.region" placeholder="请选择科目">
            <el-option label="舞蹈" value="wudao"></el-option>
            <el-option label="中国琴" value="zhongguoqin"></el-option>
            <el-option label="芭蕾舞" value="baleiwu"></el-option>
            <el-option label="书法" value="shufa"></el-option>
            <el-option label="钢琴" value="gangqin"></el-option>
            <el-option label="小提琴" value="xiaotiqin"></el-option>
          </el-select>
        </el-form-item>
        <div class="teacher">
          <h2>老师数目({{this.tableData.length}}个)</h2>
          <span class="addTeacher" @click="addTeacher=true">+添加</span>
        </div>
      </el-form>
      <el-table
        :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
        border
        style="width: 100%"
        class="content"
        @selection-change="handleSelectionChange"
      >
        <el-table-column class="content-text" fixed prop="ID" label="老师ID" width="100"></el-table-column>
        <el-table-column class="content-text" prop="name" label="老师姓名" width="150"></el-table-column>
        <el-table-column class="content-text" prop="tel" label="联系方式" width="150"></el-table-column>
        <el-table-column class="content-text" prop="subject" label="科目" width="200"></el-table-column>
        <el-table-column class="content-text" prop="calssNum" label="课程数" width="100"></el-table-column>
        <el-table-column class="content-text" prop="zip" label="是否绑定移动端" width="150"></el-table-column>
        <el-table-column class="content-text" prop="introduce" label="推荐状态" width="150">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </template>
        </el-table-column>
        <el-table-column class="content-text" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="small"
              @click="handleEdit(scope.$index, scope.row,scope)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        background
        layout="prev, pager, next, sizes, total, jumper"
        :total="this.tableData.length"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-main>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="老师ID">
          <el-input v-model="form.ID"></el-input>
        </el-form-item>
        <el-form-item label="老师姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="科目">
          <el-input v-model="form.subject"></el-input>
        </el-form-item>
        <el-form-item label="课程数">
          <el-input v-model="form.calssNum"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加老师弹出框 -->
    <el-dialog title="添加" :visible.sync="addTeacher" width="40%">
      <el-form ref="form2" :model="form" label-width="120px">
        <el-form-item label="老师ID">
          <el-input v-model="form2.ID"></el-input>
        </el-form-item>
        <el-form-item label="老师姓名">
          <el-input v-model="form2.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form2.tel"></el-input>
        </el-form-item>
        <el-form-item label="科目">
          <el-input v-model="form2.subject"></el-input>
        </el-form-item>
        <el-form-item label="课程数">
          <el-input v-model="form2.calssNum"></el-input>
        </el-form-item>
        <el-form-item label="是否绑定移动端">
          <el-input v-model="form2.zip"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.stop="handleCancel">取 消</el-button>
        <el-button type="primary" @click.stop="handleAddTeacher">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
export default {
  name: "education-item1",
  data() {
    return {
      tableData: [], //老师信息
      currentPage: 1, //默认显示第一页
      formInline: {
        user: "", //校区
        region: "", //科目
      },
      addTeacher: false, // 控制添加老师显示框的显示隐藏
      editVisible: false, //编辑老师弹窗的显示隐藏
      form: {}, //编辑老师信息
      form2: {}, //添加老师信息
      pagesize: 5, //每页显示条数
      currpage: 1, //当前页码
    };
  },
  mounted() {
    //请求数据
    this.$axios
      .get("/app/mock/264777/example/1598250282725")
      .then((res) => {
        this.tableData = res;
      })
      .catch((err) => console.log(err));
  },
  methods: {
    //切换页码
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleSelectionChange(val) {
      console.log(val);
    },
    //添加老师操作
    handleAddTeacher() {
      if (
        this.form2.ID &&
        this.form2.name &&
        this.form2.tel &&
        this.form2.subject &&
        this.form2.calssNum &&
        this.form2.zip
      ) {
        let newTeacher = {
          ID: this.form2.ID,
          name: this.form2.name,
          tel: this.form2.tel,
          subject: this.form2.subject,
          calssNum: this.form2.calssNum,
          zip: this.form2.zip,
        };
        this.tableData.push(newTeacher);
        this.form2.ID = "";
        this.form2.name = "";
        this.form2.tel = "";
        this.form2.subject = "";
        this.form2.calssNum = "";
        this.form2.zip = "";
        this.addTeacher = false;
      } else {
        alert("没有添加对应的条件 不能添加");
        return false;
      }
    },
    // 取消添加
    handleCancel() {
      this.addTeacher = false;
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.$message.success("删除成功");
          this.tableData.splice(index, 1);
        })
        .catch(() => {});
    },
    // 编辑操作
    handleEdit(index, row, scope) {
      console.log(scope);
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
  },
};
</script>
<style scoped>
.header-r {
  height: 65px;
  width: 300px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.header-r .el-icon-user {
  padding-top: 30px;
  margin-left: 40px;
  margin-right: 20px;
}
.header {
  border-width: 0px;
  width: 1100px;
  height: 65px;
}
.header img {
  float: left;
  border-width: 0px;
  margin: 20px 15px;
  width: 20px;
  height: 15px;
}
.header h2 {
  float: left;
  margin-top:20px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.647058823529412);
  line-height: 22px;
}
.content-header .teacher {
  height: 40px;
}
.content-header h2 {
  float: left;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.647058823529412);
  line-height: 40px;
}
.content-header .addTeacher {
  width: 79px;
  height: 32px;
  background-color: rgba(255, 0, 0, 1);
  border-width: 0px;
  float: right;
  cursor: pointer;
  box-shadow: none;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  line-height: 32px;
  border-radius: 4px;
}
.el-table .cell {
  text-align: center !important;
}
.el-form-item__label {
  text-align: center !important;
  padding: 0 8px 0 0 !important;
}
</style>